<template>
    <div class="detail">
      <MHeader :back="true">详情页</MHeader>
      <ul>
        <li>
          <label for="bookName">名称</label>
          <input type="text" v-model="book.bookName" id="bookName"/>
        </li>
        <li>
          <label for="bookInfo">说明</label>
          <input type="text" v-model="book.bookInfo" id="bookInfo"/>
        </li>
        <li>
          <label for="bookPrice">价格</label>
          <input type="number" v-model.number="book.bookPrice" id="bookPrice"/>
        </li>
        <li>
          <button @click="update">确认修改</button>
        </li>
      </ul>
    </div>
</template>
<script>
import MHeader from '@/base/MHeader'
import {findOneBook, updateBook} from '@/api'
export default {
  data () {
    return {book: {}}
  },
  created () {
    this.getData()
  },
  watch: {
    // 只要路径发生变化 重新获取数据
    $route () {
      this.getData()
    }
  },
  computed: {
    // 将路径参数的id映射到bid上
    bid () {
      return this.$route.params.bid
    }
  },
  methods: {
    async getData () {
      this.book = await findOneBook(this.bid)
      // 如果是空对象，需要跳转回列表页
      Object.keys(this.book).length > 0 ? void 0 : this.$router.push('/list')
    },
    async update () {
      await updateBook(this.bid, this.book)
      // 修改完成后跳转页面
      this.$router.push('/list')
    }
  },
  components: {
    MHeader
  }
}
</script>
<style scoped lang = "less">
  .detail{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #fff;
    z-index: 100;
  }
  ul{
    margin: 10px 20px;
    li{
      label{
        display: block;
        font-size: 25px;
      }
      input{
        height: 25px;
        width: 100%;
      }
      button{
        display: block;
        width: 80px;
        height: 30px;
        background: #2aabd2;
        color: #fff;
        border: none;
        border-radius: 4px;
        outline: none;
        margin-top: 10px;
      }
    }
  }
</style>
